<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/theme-chalk/index.css">
    <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">-->
    <!--    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></script>-->
    <!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.13/index.js"></script>
    <style>
        body{
            margin:0;
        }
        el-button{
            margin-right: 20px;
        }

        .left{
            width: 250px;
            height: 800px;
            background-color: #545c64;
        }
        .right{
            flex: 1;
            padding: 30px;
            border-left: 2px solid lightgrey;
            height: 740px;
        }
        .title{
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 10px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="app">
        <el-input v-model="phone"></el-input>
        <el-input v-model="phoneCode"></el-input>
        <el-button @click="login(1)">电话登录</el-button>

    <el-input v-model="mail"></el-input>
    <el-input v-model="mailCode"></el-input>
    <el-button @click="login(2)">邮箱登录</el-button>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:function (){
            return {
                phone: "",
                phoneCode: "",
                mail: "",
                mailCode: ""
            }
        },
        methods:{
            login(flag){
                let that = this
                let param = new URLSearchParams()
                param.append('phone', that.phone)
                param.append('phoneCode', that.phoneCode)
                let param2 = new URLSearchParams()
                param2.append('mail', that.mail)
                param2.append('mailCode', that.mailCode)
                axios.post('http://localhost:8081/bookMall/user/login',
                    flag==1?param:param2
                )
                    .then(function (res) {
                        console.log(res.data);
                        alert(res.data.data);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
        }
    })
</script>
</html>